<template>
  <div class="table-wrap" v-loading="isShow">
    <div class="attachment-form">
      <el-form
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">项目信息</div>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input
                v-model="parameter.projectName"
                style="width: 320px"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目地址">
              <el-input
                placeholder="请输入"
                v-model="parameter.projectAddress"
                style="width: 320px"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="勘界系统（出报告时间）">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="parameter.kjxtTime"
                type="date"
                placeholder="选择日期"
                :clearable="false"
                style="width: 320px"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select
                placeholder="选择状态"
                v-model="parameter.status"
                clearable
                style="width: 320px"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            class="left"
            style="display: flex; align-items: center"
          >
            <div class="attachment-form-title">
              建设用地征地情况明细表
            </div>
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="uploadExcelForm"
              >上传Excel表</el-button
            >
            <input
              type="file"
              name=""
              id=""
              @change="realHandleUpload"
              style="display: none"
              ref="fileUpload"
              :value="uploadFileByExcel"
            />
            <el-button
              plain
              style="margin-left: 20px"
              @click="downloadModel"
              >模板下载</el-button
            >
          </div>
          <div
            class="right"
            style="display: flex; align-items: center"
          >
            <i
              class="el-icon-circle-plus-outline"
              style="
                font-size: 30px;
                width: 30px;
                color: rgb(2, 167, 240);
                margin-right: 10px;
              "
              @click="addTableRow"
            ></i>
            <i
              class="el-icon-remove-outline"
              style="
                font-size: 30px;
                width: 30px;
                color: #ff0000;
              "
              @click="delTableRow"
            ></i>
          </div>
        </div>
        <div class="mxbContent">
          <table border="1" cellspacing="1">
            <thead>
              <tr>
                <th :rowspan="2" style="width: 30px"></th>
                <th colspan="5">被征地单位</th>
                <th colspan="4">基本信息</th>
                <th colspan="8">征收土地面积</th>
                <th colspan="4">征地前</th>
                <th colspan="2">征地后</th>
                <th rowspan="2">农转非人口</th>
                <th rowspan="2">其中劳动力人口</th>
                <th rowspan="2">是否属全部征收</th>
              </tr>
              <tr class="contentAll">
                <th align="center">区(市)县</th>
                <th align="center">乡(镇)</th>
                <th align="center">村</th>
                <th align="center">组</th>
                <th align="center">行政区位代码</th>
                <th align="center">土地总面积</th>
                <th align="center">耕地面积</th>
                <th align="center">农业人口</th>
                <th align="center">劳动力</th>
                <th align="center">总计</th>
                <th align="center">耕地</th>
                <th align="center">园地</th>
                <th align="center">林地</th>
                <th align="center">草地</th>
                <th align="center">其他农用地</th>
                <th align="center">建设用地</th>
                <th align="center">未利用地</th>
                <th align="center">人均土地(亩)</th>
                <th align="center">劳均土地(亩)</th>
                <th align="center">人均耕地(亩)</th>
                <th align="center">劳均耕地(亩)</th>
                <th align="center">人均耕地(亩)</th>
                <th align="center">劳均耕地(亩)</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in parameter
                  .jsydzdqkmxb.detailList"
                :key="index"
                class="content"
              >
                <td></td>
                <td align="center">
                  <el-input
                    v-model="item.bzddwQsx"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.bzddwXz"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.bzddwC"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.bzddwZ"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.bzddwXzqwdm"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.jbqkTdzmj"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.jbqkGdmj"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.jbqkNyrk"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.jbqkLdl"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjZj"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjGd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjYd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjLd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjCd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjQtnyd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjJsyd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zstdmjWlyd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdqRjtd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdqLjtd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdqRjgd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdqLjgd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdhRjgd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.zdhLjgd"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input v-model="item.nzfrk"></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.qzldlrk"
                  ></el-input>
                </td>
                <td align="center">
                  <el-input
                    v-model="item.sfsqbzs"
                  ></el-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">申报材料</div>
        </div>
        <table class="table" style="margin-bottom: 0px">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th
                style="width: 20%"
                v-if="isDefaultTab && type !== 'detail'"
              >
                操作
              </th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in parameter.sbClPoList"
            :key="index"
          >
            <tr>
              <td>{{ item.rank }}</td>
              <td>{{ item.name }}</td>
              <td style="">
                <el-upload
                  class="upload"
                  :http-request="beforeUpload"
                  :on-preview="onPreview"
                  :file-list="item.landDataClFilePoList"
                  :before-upload="beforeUploadSize"
                  action="#"
                  style="position: relative"
                  :on-remove="
                    (file, fileList) =>
                      onRemove(file, fileList, 'sb')
                  "
                  :disabled="
                    !isDefaultTab || type !== 'edit'
                  "
                  accept=".doc,.docx,.pdf,.png,.jpg,.jpeg,.dwg,.mp4,.gif"
                  multiple
                >
                  <el-button
                    type="text"
                    @click="shangchuan(item)"
                    class="fileUpload"
                    v-if="isDefaultTab && type !== 'detail'"
                  >
                    <span
                      class="upload-icon"
                      v-if="true"
                    ></span>
                    <svg-icon
                      icon-class="uploadDeactive"
                      class="upload-deactive-icon"
                      font-size="20"
                      v-else
                    ></svg-icon>
                    <span
                      class="upload-text"
                      :class="
                        isDefaultTab
                          ? ''
                          : 'upload-text-disabled disabled'
                      "
                      >点击上传</span
                    >
                  </el-button>
                </el-upload>
              </td>
              <td v-if="isDefaultTab && type !== 'detail'">
                <div class="table-btn">
                  <!-- <div class="table-btn-item">上传</div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">审批材料</div>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th style="width: 20%" v-if="type == 'edit'">
                操作
              </th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in parameter.spClPoList"
            :key="index"
          >
            <tr>
              <td>{{ item.rank }}</td>
              <td>{{ item.name }}</td>
              <td style="">
                <el-upload
                  class="upload"
                  :http-request="beforeUpload"
                  :on-preview="onPreview"
                  :file-list="item.landDataClFilePoList"
                  :before-upload="beforeUploadSize"
                  action="#"
                  style="position: relative"
                  :on-remove="
                    (file, fileList) =>
                      onRemove(file, fileList, 'sp')
                  "
                  :disabled="
                    !isDefaultTab || type !== 'edit'
                  "
                  accept=".doc,.docx,.pdf,.png,.jpg,.jpeg,.dwg,.mp4,.gif"
                  multiple
                >
                  <el-button
                    type="text"
                    @click="shangchuan(item)"
                    class="fileUpload"
                  >
                    <span
                      class="upload-icon"
                      v-if="true"
                    ></span>
                    <svg-icon
                      icon-class="uploadDeactive"
                      class="upload-deactive-icon"
                      font-size="20"
                      v-else
                    ></svg-icon>
                    <span
                      class="upload-text"
                      :class="
                        isDefaultTab
                          ? ''
                          : 'upload-text-disabled disabled'
                      "
                      >点击上传</span
                    >
                  </el-button>
                </el-upload>
              </td>
              <td v-if="type == 'edit'">
                <div class="table-btn">
                  <!-- <div class="table-btn-item">上传</div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { queryOptions } from '@/api/dict'
import { getDetail } from '@/api/tudi'
import { queryOptions } from '@/api/dict'
import {
  getZuJuanDetail,
  downloadExcel
} from '@/api/zujuan'
import { downloadOneFile } from '@/api/projectRecord'
import { noticeFileUpload } from '@/api/wisdomBuild'
import { uploadJsydzdqkmxb } from '@/api/zujuan'
export default {
  props: {
    currentTab: {
      type: [String, Number],
      default: '0'
    },
    pkid: String,
    type: { type: String, default: 'edit' },
    defaultIndex: {
      type: [Number, String],
      default: '0'
    }
  },
  computed: {
    isDefaultTab() {
      if (this.defaultIndex == this.currentTab) {
        return true
      } else {
        return false
      }
    }
  },
  data() {
    return {
      selectList: [],
      selectIndexList: [],
      isShow: false,
      parameter: {
        area: ''
      },
      statusOptions: [],
      selectPkId: '',
      uploadFileByExcel: null
    }
  },
  async created() {
    await this.getStatusOptions()
    console.log(this.pkid)
    if (this.pkid !== '') {
      await this.getDetailData()
    }
  },
  mounted() {
    console.log(this.pkid)
  },
  methods: {
    delTableRow() {
      this.$nextTick(() => {
        // this.delCheckBox()
        this.handleDel()
        this.changeAll({ target: { checked: false } })
      })
    },
    handleDel() {
      //selectIndexList为选择的序号

      let num = 0
      for (
        let i = 0;
        i < this.selectIndexList.length;
        i++
      ) {
        this.parameter.jsydzdqkmxb.detailList.splice(
          this.selectIndexList[i] - num,
          1
        )
        num++
      }
      this.selectList = []
      this.selectIndexList = []
    },
    addOneModel() {
      if (this.parameter.jsydzdqkmxb.detailList == null) {
        this.parameter.jsydzdqkmxb.detailList = []
      }
      this.parameter.jsydzdqkmxb.detailList.push({
        bzddwC: '',
        bzddwQsx: '',
        bzddwXz: '',
        bzddwXzqwdm: '',
        bzddwZ: '',
        jbqkGdmj: '',
        jbqkLdl: '',
        jbqkNyrk: '',
        jbqkTdzmj: '',
        nzfrk: '',
        pkid: '',
        qzldlrk: '',
        sfsqbzs: '',
        zdhLjgd: '',
        zdhRjgd: '',
        zdqLjgd: '',
        zdqLjtd: '',
        zdqRjgd: '',
        zdqRjtd: '',
        zjDataId: '',
        zstdmjCd: '',
        zstdmjGd: '',
        zstdmjJsyd: '',
        zstdmjLd: '',
        zstdmjQtnyd: '',
        zstdmjWlyd: '',
        zstdmjYd: '',
        zstdmjZj: ''
      })
    },
    addTableRow() {
      this.delCheckBox()
      this.addOneModel()
      this.$nextTick(() => {
        // this.delCheckBox()
        this.addCheckBox()
      })
    },
    //点击选择
    changeSelect(val) {
      this.pushCheckBoxList()
    },
    //添加到已选择列表里
    pushCheckBoxList() {
      this.selectList = []
      this.selectIndexList = []
      this.$nextTick(() => {
        let contentList =
          document.getElementsByClassName('myDom')
        for (
          let i = 0;
          i < this.parameter.jsydzdqkmxb.detailList.length;
          i++
        ) {
          console.log(contentList[i].checked)
          if (contentList[i].checked) {
            this.selectList.push(
              this.parameter.jsydzdqkmxb.detailList[i]
            )
            this.selectIndexList.push(i)
          }
        }
        console.log(this.selectList, this.selectIndexList)
      })
    },
    //全选
    changeAll(val) {
      let content = document.getElementsByClassName('myDom')
      console.log('全选', content)
      this.selectIndexList = []
      if (val.target.checked) {
        this.selectList = JSON.parse(
          JSON.stringify(
            this.parameter.jsydzdqkmxb.detailList
          )
        )
        for (let i = 0; i < content.length; i++) {
          content[i].checked = true
          console.log(content[i].checked)
          this.selectIndexList.push(i)
        }
      } else {
        this.selectList = []
        for (let i = 0; i < content.length; i++) {
          content[i].checked = false
        }
      }
      console.log(this.selectList)
    },
    delCheckBox() {
      for (
        let i = 0;
        i < this.parameter.jsydzdqkmxb.detailList.length;
        i++
      ) {
        let delDom =
          document.getElementsByClassName('myDom')[0]
        document
          .getElementsByClassName('content')
          [i].removeChild(delDom)
      }
      let delDomAll =
        document.getElementsByClassName('myDomAll')[0]
      document
        .getElementsByClassName('contentAll')[0]
        .removeChild(delDomAll)
    },
    //动态增加多选框
    addCheckBox() {
      let contentH =
        document.getElementsByClassName('content')[0]
          .clientHeight
      let contentAllH =
        document.getElementsByClassName('contentAll')[0]
          .clientHeight
      for (
        let i = 0;
        i < this.parameter.jsydzdqkmxb.detailList.length;
        i++
      ) {
        var myDom = document.createElement('input')
        myDom.type = 'checkbox'
        myDom.className = 'myDom'
        myDom.onchange = this.changeSelect
        //6为选择框的一半
        myDom.style.cssText = `position: absolute;left:15px;transform:translate(-6px,${
          Math.floor(contentH / 2) - 6
        }px)`
        document
          .getElementsByClassName('content')
          [i].appendChild(myDom)
      }
      //增加一个全选框
      var myDomAll = document.createElement('input')
      myDomAll.type = 'checkbox'
      myDomAll.className = 'myDomAll'
      myDomAll.onchange = this.changeAll
      //6为选择框的一半
      // 15为该列的一半
      myDomAll.style.cssText = `position: absolute;left:15px;transform:translate(-6px,${
        Math.floor(contentAllH / 2) - 6
      }px)`
      document
        .getElementsByClassName('contentAll')[0]
        .appendChild(myDomAll)
    },
    getStatusOptions() {
      queryOptions('tdbz_status').then((res) => {
        if (res.success) {
          this.statusOptions = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    getDetailData() {
      console.log(this.pkid)
      this.isShow = true
      getZuJuanDetail(this.pkid)
        .then((res) => {
          console.log(res)
          this.parameter = JSON.parse(
            JSON.stringify(res.data)
          )
          //添加附件名
          this.addName(this.parameter)
          console.log('测试')
          if (
            !this.parameter.jsydzdqkmxb.detailList ||
            this.parameter.jsydzdqkmxb.detailList.length ==
              0
          ) {
            console.log(
              '测试2',
              this.parameter.jsydzdqkmxb.detailList
            )
            this.addOneModel()
            console.log(
              '测试3',
              this.parameter.jsydzdqkmxb.detailList
            )
          }
          this.$nextTick(() => {
            this.addCheckBox()
          })
          this.isShow = false
        })
        .catch((err) => {
          this.isShow = false
        })
    },
    addName(obj) {
      //申报材料赋名
      for (let i = 0; i < obj.sbClPoList.length; i++) {
        for (const key2 in obj.sbClPoList[i]
          .landDataClFilePoList) {
          obj.sbClPoList[i].landDataClFilePoList[
            key2
          ].name =
            obj.sbClPoList[i].landDataClFilePoList[
              key2
            ].fileName
        }
      }
      //审批材料赋名
      for (let i = 0; i < obj.spClPoList.length; i++) {
        for (const key2 in obj.spClPoList[i]
          .landDataClFilePoList) {
          obj.spClPoList[i].landDataClFilePoList[
            key2
          ].name =
            obj.spClPoList[i].landDataClFilePoList[
              key2
            ].fileName
        }
      }
    },
    shangchuan(item) {
      console.log(item)
      this.selectPkId = item.pkid
    },
    onRemove(file, fileList, type) {
      // 申报删除
      if (type === 'sb') {
        let arr = this.parameter.sbClPoList.find(
          (item) => item.pkid == file.clId
        ).landDataClFilePoList
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fileId == file.fileId) {
            arr.splice(i, 1)
          }
        }
      } else if (type === 'sp') {
        // 审批删除
        let arr2 = this.parameter.spClPoList.find(
          (item) => item.pkid == file.clId
        ).landDataClFilePoList
        for (let i = 0; i < arr2.length; i++) {
          if (arr2[i].fileId == file.fileId) {
            arr2.splice(i, 1)
          }
        }
      }
    },
    downloadDaochu(data, fileName) {
      const blob = new Blob([data]) // 把得到的结果用流对象转一下
      const a = document.createElement('a') // 创建一个<a></a>标签
      a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
      a.download = fileName // 设置文件名
      a.style.display = 'none' // 障眼法藏起来a标签
      document.body.appendChild(a) // 将a标签追加到文档对象中
      a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove() // 一次性的，用完就删除a标签
    },

    xiazai(file) {
      downloadOneFile(file).then((res) => {
        this.downloadDaochu(
          res,
          file.fileName ? file.fileName : file.name
        )
      })
    },
    onPreview(file) {
      console.log(file)
      this.xiazai(file)
    },
    beforeUpload(file) {
      console.log(file)
      file = file.file
      const param = new FormData()
      param.append('file', file)
      noticeFileUpload(param).then(async (res) => {
        if (
          this.parameter.sbClPoList.find(
            (item) => item.pkid == this.selectPkId
          )
        ) {
          //申报里添加数据
          await this.parameter.sbClPoList
            .find((item) => item.pkid == this.selectPkId)
            .landDataClFilePoList.push({
              name: file.name,
              fileId: res.data
            })
        } else {
          //审批材料
          await this.parameter.spClPoList
            .find((item) => item.pkid == this.selectPkId)
            .landDataClFilePoList.push({
              name: file.name,
              fileId: res.data
            })
        }
      })
      console.log(this.parameter)
    },
    beforeUploadSize(file) {
      // if (file.size / (1024 * 1024) > 10) {
      //   // 限制文件大小
      //   alert('当前限制文件大小不能大于10M')
      //   return false
      // }
    },
    //导出模板
    downloadModel() {
      console.log('导出')
      downloadExcel().then((res) => {
        // console.log(res)
        this.downloadDaochu(
          res,
          '征收土地情况调查汇总表-模板.xlsx'
        )
      })
    },
    downloadDaochu(data, fileName) {
      console.log(data, fileName)
      const blob = new Blob([data]) // 把得到的结果用流对象转一下
      const a = document.createElement('a') // 创建一个<a></a>标签
      a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
      a.download = fileName // 设置文件名
      a.style.display = 'none' // 障眼法藏起来a标签
      document.body.appendChild(a) // 将a标签追加到文档对象中
      a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove() // 一次性的，用完就删除a标签
    },
    //导入excel
    uploadExcelForm() {
      console.log('点击了')
      console.log(this.$refs.fileUpload)
      this.$refs.fileUpload.click()
    },
    realHandleUpload(event) {
      console.log('触发上传了')
      console.log(event.target)
      const param = new FormData()
      param.append('file', event.target.files[0])
      this.isShow = true
      uploadJsydzdqkmxb(param).then((res) => {
        if (res.success) {
          this.$message.success('上传成功')
          this.isShow = false
          this.delCheckBox()
          this.parameter.jsydzdqkmxb = res.data
          this.selectIndexList = []
          this.selectList = []
          this.uploadFileByExcel = null
          this.$nextTick(() => {
            this.addCheckBox()
          })
        } else {
          this.$message.error(res.message)
          this.isShow = false
          this.uploadFileByExcel = null
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload {
  position: absolute !important;
  right: -25% !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
  &-list {
    &__item {
      margin-top: 0px;
      .el-upload-list__item-name {
        :first-child {
          margin-top: 8px;
        }
        :last-child {
          margin-bottom: 8px;
        }
      }
      .el-upload-list__item-status-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .el-icon-close {
        // position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
    }
  }
}
.upload {
  //   .el-upload-list--text{
  //   position: absolute !important;
  //   right: -25% !important;
  //   top: 50% !important;
  //   transform: translate(50%,-50%) !important;
  // }
  cursor: pointer;
  // height: 0px;

  &-text {
    // position: absolute;
    // top: -35px;
    // left: 260px;
    color: #00baff;
    // display: none;
  }
  &-text-disabled {
    color: rgb(176, 176, 176);
  }
  &-icon {
    // position: absolute;
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
    // top: -22px;
    // left: 240px;
    background: url('~@/assets/images/wisdom-construction/upload-file.png');
    background-size: 100% 100%;
  }
  &-deactive-icon {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
  }
  .fileUpload {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
  }

  .el-upload-list__item {
    margin-top: 0px !important;
  }
}
.attachment-form {
  padding: 0 27px;
  &-title {
    color: #4c565c;
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    font-size: 16px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      margin-right: 7px;
    }
  }
  .table {
    border-collapse: collapse;
    width: 100%;
    box-sizing: border-box;
    margin-left: 7px;
    margin-bottom: 80px;
    thead {
      background-color: #f2f6fb;
    }
    td,
    th {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #6b767d;
      line-height: 42px;
      border: 1px solid #f2f6fb;
      text-align: center;
    }
    td {
      font-weight: normal;
    }
    tbody {
      tr {
        td {
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            width: 300px;
          }
          &:nth-child(3) {
            width: 300px;
          }
          &:nth-child(4) {
            max-width: 1000px;
          }
          &:nth-child(5) {
            width: 300px;
          }
        }
      }
    }
  }
}
.disabled {
  cursor: default;
}
.mxbContent {
  // padding-left: 30px;
  position: relative;
  table {
    width: 100%;
    font-size: 14px;
    border: 0px solid #dcdfe6;
    border-collapse: collapse;
  }
  th {
    border: 1px solid #dcdfe6;
    font-weight: normal !important;
    box-sizing: border-box;
    padding: 3px 0px;
  }
  td {
    border: 1px solid #dcdfe6;
    height: 40px;
  }
}
::v-deep .content {
  .el-input {
    .el-input__inner {
      // width: 320px;
      // height: 100% !important;
      background: #fff !important;
      border: none;
      padding-left: 5px;
      padding-right: 5px;
    }
  }
}
</style>
